<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Blog - Content Manager</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
	<!-- 头部 -->
    <div class="header">
    	<!-- 网站标志 -->
        <div class="logo fl">
          黑马程序员 <i>ITHEIMA</i>
        </div>
        <!-- /网站标志 -->
        <!-- 用户信息 -->
        <div class="info">
            <div class="profile dropdown fr">
                <span class="btn dropdown-toggle" data-toggle="dropdown">
					admin
					<span class="caret"></span>
                </span>
                <ul class="dropdown-menu">
                    <li><a href="user-edit.html">个人资料</a></li>
                    <li><a href="#">退出登录</a></li>
                </ul>
            </div>
        </div>
        <!-- /用户信息 -->
    </div>
    <!-- /头部 -->
    <!-- 主体内容 -->
    <div class="content">
    	<!-- 侧边栏 -->
        <div class="aside fl">
            <ul class="menu list-unstyled">
                <li>
                    <a class="item active" href="user.html">
						<span class="glyphicon glyphicon-user"></span>
						用户管理
					</a>
                </li>
                <li>
                    <a class="item" href="article.html">
			  			<span class="glyphicon glyphicon-th-list"></span>
			  			文章管理
			  		</a>
                </li>
            </ul>
            <div class="cprt">
                Powered by <a href="http://www.itheima.com/" target="_blank">黑马程序员</a>
            </div>
        </div>
        <!-- 侧边栏 -->
        <div class="main">
        	<!-- 分类标题 -->
            <div class="title">
                <h4>用户</h4>
                <span>找到1个用户</span>
                <a href="user-edit.html" class="btn btn-primary new">新增用户</a>
            </div>
            <!-- /分类标题 -->
            <!-- 内容列表 -->
            <table class="table table-striped table-bordered table-hover custom-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>5b9a716cb2d2bf17706bcc0a</td>
                        <td>wangjian</td>
                        <td>wjb19891223@163.com</td>
                        <td>超级管理员</td>
                        <td>正常</td>
                        <td>
                            <a href="user-edit.html" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                        </td>
                    </tr>
                    <tr>
                        <td>5b9a716cb2d2bf17706bcc0a</td>
                        <td>wangjian</td>
                        <td>wjb19891223@163.com</td>
                        <td>普通用户</td>
                        <td>禁用</td>
                        <td>
                            <a href="user-edit.html" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                        </td>
                    </tr>
                    <tr>
                        <td>5b9a716cb2d2bf17706bcc0a</td>
                        <td>wangjian</td>
                        <td>wjb19891223@163.com</td>
                        <td>普通用户</td>
                        <td>启用</td>
                        <td>
                            <a href="user-edit.html" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- /内容列表 -->
            <!-- 分页 -->
            <ul class="pagination">
                <li>
                    <a href="#">
			        <span>&laquo;</span>
			      </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#">
			        <span>&raquo;</span>
			      </a>
                </li>
            </ul>
            <!-- /分页 -->
        </div>
    </div>
    <!-- /主体内容 -->
    <!-- 删除确认弹出框 -->
    <div class="modal fade confirm-modal">
        <div class="modal-dialog modal-lg">
            <form class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">请确认</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这个用户吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
    <!-- /删除确认弹出框 -->
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>